<template>
  <div style="padding: 10px;">
    <!--按钮区域    -->
    <div style="margin: 10px 0">
      <el-button type="primary" @click="add">新增</el-button>
      <el-button type="primary">导入</el-button>
      <el-button type="primary">导出</el-button>
    </div>
    <!--搜索区域    -->
    <div style="margin:10px 0">
      <el-input v-model="search" placeholder="请输入内容" style="width:20%" clearable></el-input>  <!--clearable:用来清空输入框-->
      <el-button type="primary" style="margin-left:5px;" @click="load()">搜索</el-button>    <!--  这里的模糊查询是根据昵称进行模糊查询的  -->
    </div>
    <el-table :data="tableData"  border stripe style="width: 100%">
      <el-table-column prop="id" sortable label="ID"></el-table-column>
      <el-table-column prop="name" label="书名"> </el-table-column>
      <el-table-column prop="price" label="价格"> </el-table-column>
      <el-table-column prop="author" label="作者"> </el-table-column>
      <el-table-column prop="createTime" label="出版日期"> </el-table-column>
      <el-table-column  prop="cover"  label="封面地址"></el-table-column>
      <el-table-column fixed="right" label="操作" width="260">
        <template #default="scope">
          <el-button @click="handleEdit(scope.row)" type="primary" size="mini">编辑</el-button>  <!--handleEdit是编辑方法，后面有对应的方法-->
          <!-- 自带提示框的删除按钮 -->
          <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row.id)">
            <template #reference>
              <el-button size="mini" type="danger" >删除</el-button>   <!-- 注意此处如果方法加在删除按钮上，那么在弹出提示框点击确定的时候就无法执行删除操作了，
              所以这里需要将删除的方法，挂到弹框的确定按钮上 -->
            </template>
          </el-popconfirm>
        </template>

      </el-table-column>
    </el-table>
    <!--    分页-->
    <div style="margin: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">  //双引号里面的total是定义一个变量，在这里定义了，就需要在下面data里面初始化一下
      </el-pagination>

      <el-dialog title="提示"  v-model="dialogVisible" width="30%">
        <el-form :model="book" label-width="120px">
          <el-form-item label="书名:">
            <el-input v-model="book.name" style="width:80%"></el-input>
          </el-form-item>

          <el-form-item label="价格:">
            <el-input v-model="book.price" style="width:80%"></el-input>
          </el-form-item>

          <el-form-item label="作者:">
            <el-input v-model="book.author" style="width:80%"></el-input>
          </el-form-item>

          <el-form-item label="出版日期:">
            <!--   clearable:可清除 一个小叉号     value-format:日期格式化-->
            <el-date-picker v-model="book.createTime" value-format="YYYY-MM-DD"  type="date" clearable placeholder="选择日期" style="width:80%"></el-date-picker>
          </el-form-item>

          <el-form-item label="封面地址:">
            <el-input v-model="book.cover" style="width:80%"></el-input>
          </el-form-item>


        </el-form>
        <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
        </template>
      </el-dialog>

    </div>
  </div>
</template>

<script>
import request from "../utils/request";

export default {
  name: 'book',
  components:{

  },
  data(){
    return {
      book:{},
      dialogVisible:false,
      search: '',
      currentPage: 1,
      pageSize: 5,
      total: 0,  //默认10条
      tableData:[]
    }
  },

  //页面加载完立即执行的方法
  created() {
    this.load()
  },
  methods:{
    //查询方法
    load(){
      request.get("/book/selectList",{
        params:{
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res=>{
        this.tableData=res.data.records
        this.total = res.data.total
      })
    },

    //新增打开弹窗方法
    add(){
      this.dialogVisible=true;
      this.book={}; //清空表单中的值
    },

    //进行保存 使用aios进行数据交互
    save(){
      if(this.book.id){   //如果有id,则进行更新操作  并且更新使用put请求
        request.put("/book/update",this.book).then(res=>{
          console.log(res)
          if(res.code === '0'){
            this.$message({
              type:"success",
              message: "修改成功"
            })
          }else{
            this.$message({
              type:"error",
              message: "修改失败"
            })
          }
          this.load();  //更新完成后，重新刷新表格数据
          this.dialogVisible=false;    //最后关闭弹窗

        })
      }else{     //如果没有id,则进行新增操作
        request.post("/book/save",this.book).then(res =>{
          this.$message({
            type:"success",
            message: res.msg
          })
          this.load();  //更新完成后，重新刷新表格数据
          this.dialogVisible=false;    //最后关闭弹窗
        })
      }


    },

    //编辑打开弹窗方法
    handleEdit(row){
      this.book=JSON.parse(JSON.stringify(row));  //将编辑的弹窗附上值
      this.dialogVisible=true;  //打开编辑的弹窗（和新增用的一个弹窗）
    },


    //删除方法
    handleDelete(id){
      request.delete("/book/del/"+id).then(res=>{
        if(res.code === '0'){
          this.$message({
            type:"success",
            message: "删除成功"
          })
        }else{
          this.$message({
            type:"error",
            message: res.msg
          })
        }
        this.load()
      })
    },


    //在上面的data中，pageSize和currentPaage都有默认值，这里要触发分页，需要重新根据变量赋值
    //改变当前每页条数触发
    handleSizeChange(pageSize){
      this.pageSize=pageSize
      this.load()
    },

    //改变当前页码触发
    handleCurrentChange(pageNum){
      this.currentPage=pageNum
      this.load()
    }

  }
}
</script>
